<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.dropdown.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox [sourceData]="basicSource">
      <d-demo-dropdown-basic demo></d-demo-dropdown-basic>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'turn-off-trigger-point-settings'">
    <div class="devui-demo-title">{{ 'components.dropdown.closeScopeDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.dropdown.closeScopeDemo.description' | translate }}
    </div>
    <d-codebox [sourceData]="closeScopeSource">
      <d-demo-dropdown-close-scope demo></d-demo-dropdown-close-scope>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'suspension-drop-down'">
    <div class="devui-demo-title">{{ 'components.dropdown.hoverDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.dropdown.hoverDemo.description' | translate }}</div>
    <d-codebox [sourceData]="hoverSource">
      <d-dropdown-demo-hover demo></d-dropdown-demo-hover>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'manually-control'">
    <div class="devui-demo-title">{{ 'components.dropdown.manuallyDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.dropdown.manuallyDemo.description' | translate }}</div>
    <d-codebox [sourceData]="manuallySource">
      <d-dropdown-demo-manually demo></d-dropdown-demo-manually>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'dropdown-set-is-open'">
    <div class="devui-demo-title">{{ 'components.dropdown.set-is-openDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-dropdown-set-is-open" [sourceData]="dropdownDemoSetIsOpen">
      <d-demo-dropdown-set-is-open demo></d-demo-dropdown-set-is-open>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'auto-expand-and-auto-focus'">
    <div class="devui-demo-title">{{ 'components.dropdown.focusDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.dropdown.focusDemo.description' | translate }}
    </div>
    <d-codebox [sourceData]="focusSource">
      <d-dropdown-demo-focus demo></d-dropdown-demo-focus>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'when-using-appendtobody'">
    <div class="devui-demo-title">{{ 'components.dropdown.appendToBodyDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.dropdown.appendToBodyDemo.description' | translate }}</div>
    <d-codebox [sourceData]="appendToBodySource">
      <d-dropdown-appendtobody demo></d-dropdown-appendtobody>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'add-icon'">
    <div class="devui-demo-title">{{ 'components.dropdown.addIconDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox [sourceData]="addIconSource">
      <d-dropdown-demo-add-icon demo></d-dropdown-demo-add-icon>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'multi-level-drop-down-menu'">
    <div class="devui-demo-title">{{ 'components.dropdown.multiLevelDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox [sourceData]="multiLevelSource">
      <d-dropdown-demo-multi-level demo></d-dropdown-demo-multi-level>
    </d-codebox>
  </div>
</div>
